// @ts-nocheck
import React, { useState, useEffect } from 'react';
import './index.less';
import 'lib-flexible';
import '@/pages/golobo.less';
var startPoint_input = document.querySelector('#startPoint');
var endPoint_input = document.querySelector('#endPoint');
var routeType_select = document.querySelector('select');
var bdmap = null;

export default function index() {
  useEffect(() => {
    // 生成地图
    var map = new BMapGL.Map('bdmap-contaniner');
    var point = new BMapGL.Point(115.43, 36.48);
    map.centerAndZoom(point, 15);
    map.addControl(new BMapGL.NavigationControl());
    var centerMarker = new BMapGL.Marker(point);
    centerMarker.addEventListener('click', function (eve) {
      var opts = {
        width: 250, // 信息窗口宽度
        height: 100, // 信息窗口高度
        title: '地点坐标', // 信息窗口标题
      };
      var infoWindow_content =
        '当前位置：(' + eve.point.lng + ',' + eve.point.lat + ')';
      var infoWindow = new BMapGL.InfoWindow(infoWindow_content, opts); // 创建信息窗口对象
      map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
    });
    map.addOverlay(centerMarker);
    //自己 定位获取
    var geolocation = new BMapGL.Geolocation();
    geolocation.getCurrentPosition(function (r) {
      if (this.getStatus() == BMAP_STATUS_SUCCESS) {
        var mk = new BMapGL.Marker(r.point);
        map.addOverlay(mk);
        map.panTo(r.point);
        // console.log(r.point.lat);
      } else {
        alert('failed' + this.getStatus());
      }
    });
    // var map = new BMapGL.Map('container');
    // map.centerAndZoom(new BMapGL.Point(116.331398, 39.897445), 12);
    //创建地址解析器实例
    var myGeo = new BMapGL.Geocoder();
    // 将地址解析结果显示在地图上，并调整地图视野
    myGeo.getPoint(
      '固安县市固东线京津冀国际音乐广场',
      function (point) {
        if (point) {
          map.centerAndZoom(point, 16);
          map.addOverlay(
            new BMapGL.Marker(point, {
              title: '固安县市固东线京津冀国际音乐广场',
            }),
          );
        } else {
          alert('您选择的地址没有解析到结果！');
        }
      },
      '廊坊市',
    );

    //路径规划
    var routeType_select = document.querySelector('select');
    var routeType_select_value = routeType_select.value;

    switch (routeType_select_value) {
      case 'car':
        {
          //驾车路线规划
          var driving = new BMapGL.DrivingRoute(map, {
            renderOptions: { map: map, autoViewport: true },
          });

          //获取p1,p2的经纬度
          var p1 = new BMapGL.Point(115.46948491202, 38.897563281139);
          var p2 = new BMapGL.Point(116.30542004093144, 39.44448485530404);
          //绘制路线
          driving.search(p1, p2);
        }
        break;
      case 'bus':
        {
          var transit = new BMapGL.TransitRoute(map, {
            renderOptions: {
              map: map,
              autoViewport: true,
            },
          });
          transit.search(p1, p2);
        }
        break;
      case 'step':
        {
          var walk = new BMapGL.WalkingRoute(map, {
            renderOptions: { map: map },
          });
          walk.search(p1, p2);
        }
        break;
    }
  }, []);
  return (
    <div className="dd">
      <select>
        <option value="car">驾车</option>
        <option value="bus">公交</option>
        <option value="step">步行</option>
      </select>
      <br />
      <div id="bdmap-contaniner"></div>
    </div>
  );
}
